<template>
  <div class="lottery-container">
    <h1>抽取副本</h1>
    <div class="lottery-numbers">
      <div class="number-box" v-for="number in lotteryNumbers" :key="number">
        {{ boss[number] }}
      </div>
    </div>
    <el-button type="primary" class="lottery-button" @click="startLottery">
      Start
    </el-button>
  </div>
</template>

<script setup>
import {ref} from 'vue'

const lotteryNumbers = ref([])
let boss = ['[90] 最终幻想末世终迹',
  '[90] 乐园都市笑笑镇',
  '[90] 电脑梦境斯提格玛四',
  '[90] 近东秘宝阿尔扎达尔海底遗迹群',
  '[90] 异界孤城特罗亚宫廷',
  '[90] 雪山奥窟冥魂石洞',
  '[90] 间歇灵泉哈姆岛',
  '[90] 异界深渊月面地下溪谷']
const startLottery = () => {
  lotteryNumbers.value = generateRandomNumbers(1, boss.length)
}

const generateRandomNumbers = (count, max) => {
  const numbers = new Set()
  while (numbers.size < count) {
    numbers.add(Math.floor(Math.random() * max))
  }
  return Array.from(numbers)
}
</script>

<style scoped>
.lottery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30vh;
}

.lottery-numbers {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 16px;
  margin-bottom: 32px;
}

.number-box {
  width: 400px;
  height: 80px;
  background-color: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
}

.lottery-button {
  font-size: 20px;
  padding: 12px 32px;
}
</style>